<template>
  <div>
    <h2 style="padding: 15px 20px 15px 0px">订单管理</h2>
    <!-- 订单查询 -->
    <div style="padding: 15px 7px 15px 50px">
      <el-form-item label="用户：" style="float: left; margin-right: 15px">
        <el-input
          v-model="userVal"
          clearable
          placeholder="请输入"
          style="width: 200px"
          @keydown.enter="serchFn"
        />
      </el-form-item>

      <el-form-item label="订单状态:" style="float: left; margin-right: 15px">
        <el-select
          v-model="state"
          placeholder="请选择"
          @change="changeOrderFun"
        >
          <el-option
            v-for="item in data1"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-show="payflag"
        label="支付状态:"
        style="margin-bottom: 2%"
      >
        <el-select
          v-model="payState"
          placeholder="请选择"
          @change="changePayFun"
        >
          <el-option
            v-for="item in data2"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
    </div>
    <!-- 重置 查询按钮 -->
    <div style="margin-left: 78%; margin-top: -1.5%">
      <el-button style="padding: 0 8px" @click="resetFn">重置</el-button>
      <el-button style="padding: 0 8px" type="primary" @click="serchFn">
        查询
      </el-button>
      <span
        style="color: rgba(33, 148, 255); margin-left: 8px; cursor: pointer"
        @click="displayFn"
      >
        {{ payflag ? '收起' : '展开' }}
        <vab-icon v-show="payflag == false" icon="arrow-down-s-line" />
        <vab-icon v-show="payflag" icon="arrow-up-s-line" />
      </span>
    </div>
    <!-- 订单列表 -->
    <div>
      <h3 style="margin: 10px 0 10px 22px">订单列表</h3>
      <el-empty v-show="!tableFlag" :image-size="200" />
      <div v-show="tableFlag">
        <el-table
          :data="orderListData"
          empty-text
          height="250"
          style="width: 100%"
        >
          <el-table-column label="序号" type="index" width="60" />
          <el-table-column label="用户" prop="user.userName" width="80" />
          <el-table-column label="价格" prop="price" width="90" />
          <el-table-column label="地址" prop="address" width="110" />
          <el-table-column label="详细地址" prop="user.address" width="160" />
          <vab-icon icon="ghost-smile-line" />
          <el-table-column
            :filter-method="filterTag"
            filter-placement="bottom-end"
            :filters="[
              { text: '已完成', value: '已完成' },
              { text: '未完成', value: '未完成' },
            ]"
            label="订单状态"
            prop="orderStatus"
            width="100"
          />
          <el-table-column
            :filter-method="filterTag"
            filter-placement="bottom-end"
            :filters="[
              { text: '已支付', value: '已支付' },
              { text: '未支付', value: '未支付' },
            ]"
            label="支付状态"
            prop="payStatus"
            width="100"
          />
          <el-table-column label="操作" prop="address" width="220">
            <template #default="scope">
              <el-button
                style="padding: 0 3px; height: 30px; margin-left: 4px"
                text
                type="primary"
                @click="getOrderDetail(scope.row), (dialogTableVisible = true)"
              >
                详情
              </el-button>
              <!-- 详情弹出框 -->
              <el-dialog v-model="dialogTableVisible" title="订单详情">
                <el-table :data="gridData">
                  <el-table-column label="序号" property="date" width="150" />
                  <el-table-column label="商品" property="name" width="150" />
                  <el-table-column
                    label="图片"
                    property="address"
                    width="150"
                  />
                  <el-table-column label="数量" property="date" width="150" />
                </el-table>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button
                      style="padding: 0 3px; height: 30px"
                      @click="dialogTableVisible = false"
                    >
                      取消
                    </el-button>
                    <el-button
                      style="padding: 0 3px; height: 30px"
                      type="primary"
                      @click="dialogTableVisible = false"
                    >
                      确定
                    </el-button>
                  </span>
                </template>
              </el-dialog>
              <el-button
                style="margin-left: 4px; padding: 0 3px; height: 30px"
                type="danger"
                @click="orderListData.splice(scope.$index, 1)"
              >
                删除
              </el-button>

              <el-button
                :index="index"
                style="margin-left: 4px; padding: 0 3px; height: 30px"
                @click="payFn(scope.$index, scope.row)"
              >
                支付
              </el-button>
              <el-button
                plain
                style="margin-left: 4px; padding: 0 3px; height: 30px"
                type="primary"
                @click="completeFn(scope.$index)"
              >
                完成
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="prev, pager, next"
          :total="orderListData.length"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue'
  import { orderList, orderDetail } from '../../myApi/index'

  const userVal = ref('')
  const state = ref('')
  const payState = ref('')
  const data1 = ['全部', '未完成', '已完成']
  const data2 = ['全部', '未支付', '已支付']
  const payflag = ref(true)
  const tableFlag = ref(true)
  const dialogTableVisible = ref(false)

  const displayFn = () => {
    console.log(payflag.value)
    payflag.value = !payflag.value
  }
  /* const tableData = [
{
  date: '1',
  name: 'Tom',
  address: 'No. 189',
  tag1: "已完成",
  tag2: '已支付',
  price: 222,
},
{
  date: '2',
  name: 'Tom',
  address: 'No. 189',
  tag1: "未完成",
  tag2: '未支付',
  price: 222,
},
{
  date: '3',
  name: 'Tom',
  address: 'No. 189',
  tag1: "未完成",
  tag2: '已支付',
  price: 222,
},
] */

  const filterTag = (value, orderListData) => {
    return (
      orderListData.orderStatus == value || orderListData.payStatus == value
    )
  }
  const resetFn = () => {
    userVal.value = ''
    state.value = ''
    payState.value = ''
  }

  const orderListData = ref([])
  const orderListData2 = ref([])
  const page = ref(1)
  //订单列表
  const getOrderList = async () => {
    const data = await orderList(page.value, 10)
    orderListData.value = data.data.data
    console.log(orderListData.value)
    orderListData2.value = data.data.data
    const processedData = data.data.data.map((order) => {
      order.orderStatus = order.orderStatus == 1 ? '已完成' : '未完成'
      order.payStatus = order.payStatus == 1 ? '已支付' : '未支付'
      order.address = order.address ? order.address : '-'
      return order
    })
    orderListData.value = processedData
    console.log(orderListData.value)
  }
  const payFn = (index, row) => {
    orderListData.value[index].payStatus =
      orderListData.value[index].payStatus == '已支付' ? '未支付' : '已支付'
    console.log(index, row)
  }
  const completeFn = (index) => {
    orderListData.value[index].orderStatus =
      orderListData.value[index].orderStatus == '已完成' ? '未完成' : '已完成'
    console.log(orderListData.value)
  }
  getOrderList()
  //订单详情
  const getOrderDetail = async (row) => {
    // let id = orderListData.value[index].id;
    const data = await orderDetail(JSON.stringify({ order: row.id }))
    console.log(data)
  }
  const serchFn = () => {
    console.log(userVal.value, state.value, payState.value)
    console.log(orderListData.value)
    orderListData.value = orderListData2.value.filter((v) =>
      v.user.userName.includes(userVal.value)
    )
    console.log(orderListData.value)
  }
  const changeOrderFun = () => {
    console.log(state.value)
    if (state.value != '全部') {
      orderListData.value = orderListData2.value.filter((v) =>
        v.orderStatus.includes(state.value)
      )
    } else {
      orderListData.value = orderListData2.value
    }
  }
  watch(
    () => userVal.value,
    () => {
      console.log(111)
      if (userVal.value == '') {
        console.log(222)
        getOrderList()
      }
    }
  )
  const changePayFun = () => {
    console.log(payState.value)
    if (payState.value != '全部') {
      orderListData.value = orderListData2.value.filter((v) =>
        v.payStatus.includes(payState.value)
      )
    } else {
      orderListData.value = orderListData2.value
    }
  }
</script>
<style scoped></style>
<style scoped lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
</style>
